<template>
  <div class="flex justify-between items-center h-[43px]" style="line-height:43px;">
    <div class="flex-1">
      <i class="iconfont relative mx-3 text-2 xl" :class="iconStyle.icon" :style="{ color: iconStyle.color }"></i>
      <el-tooltip class="box-item" effect="dark" content="点我下载" placement="right">
        <span class="hoveSpan" @click="handlerClick(props.item,'download')">{{props.item.name}}</span>
      </el-tooltip>


    </div>
    <!-- 分享按钮显示 -->
    <div class="w-[150px]">
      <a class="f_sela" @click="handlerClick(props.item,'save')" v-if="isLogin">保存</a>
    </div>
    <div class="w-[150px]">{{bysize}}</div>
    <div class="w-[150px]">{{props.item.created_time}}</div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { byteToSize } from '@/utils/utils'

const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {}
    }
  },
  index: {
    type: [String, Number],
    default: 0
  },
  isLogin: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['itemClick'])

const icons: any = {
  dir: {
    icon: 'icon-file-b-2',
    color: '#E6A23C'
  },
  image: {
    icon: 'icon-file-b-6',
    color: 'text-success'
  },
  text: {
    icon: 'icon-file-s-7',
    color: '#67C23A'
  },
  video: {
    icon: 'icon-file-b-9',
    color: '#409EFF'
  },
  none: {
    icon: 'icon-file-b-8',
    color: '#606266'
  }
}


const iconStyle = computed(() => {
  return icons[`${props.item.type}`]
})

const bysize = computed(() => byteToSize(props.item.size))

const handlerClick = (item: any, type: string) => {
  emit('itemClick', {
    type,
    item
  })
}



</script>

<style scoped>
.hoveSpan:hover {
  color: #FF3311;
  cursor: pointer;
}

.f_sela {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 25px;
  font: 12px \9ED1\4F53;
  border-radius: 4px;
  border: 1px solid #D5D5D5;
  background-image: linear-gradient(#FCFCFC, #EEE);
  background-color: #f7f7f7;
  text-shadow: 0 2px 0 rgb(255 255 255 / 90%);
  float: left;
  margin-left: 12px;
  margin-top: 3px;
  outline: 0;
  cursor: pointer;
}
</style>